import {
  CSSProperties,
  FC,
  ReactNode,
  useCallback,
  useEffect,
  useRef,
} from 'react'
import styles from './AssetCard.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { SvgIcon } from '@/components/icons'
import { More } from '@/components/icons/More'
import { Button, Dropdown, MenuProps } from 'antd'
import { CopyOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons'
import { debounce } from 'lodash'
import { Graph, Node } from '@antv/x6'
import { IconTurnToAsset } from '@/components/icons/IconTurnToAsset'

interface IAssetCard {
  width?: CSSProperties['width']
  // header部分
  headerColor?: string
  cardIcon?: ReactNode
  cardTitle?: string
  isEditable?: boolean
  registerAsAsset?: () => void

  style?: CSSProperties
  className?: string
  // children?: ReactNode | null
  node?: Node
  graph?: Graph
}

export const AssetCard: FC<IAssetCard> = ({
  width,

  headerColor,
  cardIcon,
  cardTitle,
  isEditable,
  registerAsAsset,

  style,
  className,
  children,
  node,
  graph,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)
  const sizeRef = useRef()

  const items: MenuProps['items'] = [
    {
      label: '保存到设计资产',
      key: '1',
      icon: <SaveOutlined rev={undefined} />,
    },
    {
      label: '复制',
      key: '2',
      icon: <CopyOutlined rev={undefined} />,
    },
    {
      label: '删除',
      key: '3',
      icon: <DeleteOutlined rev={undefined} />,
      danger: true,
    },
  ]

  const handleCardResizeDebounce = useCallback(
    debounce(
      (width: number, height: number) => {
        // 更新节点大小
        node.prop('size', { width: width, height: height })
      },
      100,
      { leading: true, trailing: true, maxWait: 1000 }
    ),
    []
  )

  useEffect(() => {
    const cardDOM = sizeRef.current as HTMLElement
    const resizeObserver = new ResizeObserver((entries) => {
      handleCardResizeDebounce(
        entries[0].target.clientWidth,
        entries[0].target.clientHeight
      )
    })

    node && resizeObserver.observe(cardDOM)

    return () => resizeObserver.unobserve(cardDOM)
  }, [])

  return (
    <div
      ref={sizeRef}
      {...styleClass(['layout'], { width: width }, { style, className })}
    >
      <div {...styleClass(['header'], { background: headerColor })}>
        <div {...styleClass(['header-prefix'])}>
          {cardIcon}
          <div {...styleClass(['header-prefix-text'])}>{cardTitle}</div>
        </div>
        <div {...styleClass(['header-suffix'])}>
          {node && (
            <Button
              {...styleClass(['header-suffix-confirm'])}
              type="text"
              onClick={() => registerAsAsset()}
            >
              <SvgIcon icon={IconTurnToAsset} />
            </Button>
          )}
          <Dropdown menu={{ items }} arrow={true} destroyPopupOnHide={true}>
            <div {...styleClass(['header-suffix-more'])}>
              <SvgIcon icon={More} />
            </div>
          </Dropdown>
        </div>
      </div>
      <div {...styleClass(['content'])}>{children}</div>
    </div>
  )
}
